<template>
  <privacyPolicy v-if="ishow && !yinsi" />
  <condition v-if="!ishow && yinsi" />
  <div v-else-if="!ishow && !yinsi" style="height: 100vh">
    <div class="floor-swiper mg-auto">
      <el-carousel autoplay height="30vw">
        <el-carousel-item class="swiper-list-item">
          <img src="../../../public/1.jpg" />
          <!-- <img src="../../../public/3.jpg" />
					<img src="http://www.surveypeak.net/assets/bg1-BZypdaZQ.png" /> -->
        </el-carousel-item>
        <el-carousel-item class="swiper-list-item">
          <!-- <img src="../../../public/1.jpg" /> -->
          <img src="../../../public/3.jpg" />
          <!-- <img src="http://www.surveypeak.net/assets/bg1-BZypdaZQ.png" /> -->
        </el-carousel-item>
        <el-carousel-item class="swiper-list-item">
          <!-- <img src="../../../public/1.jpg" />
					<img src="../../../public/3.jpg" /> -->
          <img src="http://www.surveypeak.net/assets/bg1-BZypdaZQ.png" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="home-about">
      <div class="home-desc-title">ABOUT SURVEY NOW</div>
      <div>
        <div
          class="el-row is-align-center"
          style="margin-left: -3px; margin-right: -3px"
        >
          <div
            class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-12 is-guttered about-text"
            style="padding-right: 3px; padding-left: 3px"
          >
            <div>
              As an international market research institution, MHinsight upholds
              passion and enthusiasm, actively conducting research work in more
              than 20 countries or regions, facing various industries and
              rapidly changing business situations around the world. Our team
              has outstanding efficiency and can quickly anchor research goals.
              Whether it is helping companies find product positioning, deeply
              analyze competitors, or understanding consumer preferences and
              predicting industry development trends, we can rely on solid and
              effective research results to help customers expand their business
              and stimulate the driving force for sustained business growth. We
              also have a sample library network. <br /><br />
              <div class="about-text-top"></div>
              We are also a data collection institution in the new era,
              providing customized sample solutions from start to finish. We
              provide practical consumer and business insights through
              high-quality online research methods. Our team is composed of
              senior industry experts, dedicated to providing excellent analysis
              and services, fully supporting the growth of enterprises..
            </div>
          </div>
          <div
            class="el-col el-col-24 el-col-xs-24 el-col-sm-12 is-guttered"
            style="padding-right: 3px; padding-left: 3px"
          >
            <img
              src="http://www.surveypeak.net/assets/worldmap-3-FiUKIa.png"
              alt=""
              class="about-image"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="home-card">
      <div class="home-desc-title">WHAT WE PROVIDE</div>
      <div
        class="el-row home-card-desc-box"
        style="margin-left: -16px; margin-right: -16px"
      >
        <div
          class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-12 is-guttered card-about-text"
          style="padding-right: 16px; padding-left: 16px"
        >
          <div
            class="card-item"
            style="
              min-width: 50%;
              max-height: 430px;
              font-weight: 500;
              border-radius: 15px;
              border: 1px solid rgba(0, 0, 0, 0.175);
              font-size: 20px;
              opacity: 1;
              -webkit-box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #ffffff;
              box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #fff;
              background-color: #fff;
              margin-bottom: 10px;
            "
          >
            <div
              class="card-item-image"
              style="width: 100%; display: flex; justify-content: center"
            >
              <svg
                t="1732786326175"
                class="icon"
                viewBox="0 0 1039 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4470"
                width="200"
                height="200"
              >
                <path
                  d="M973.46573 859.786579v2.754745c-223.991391 13.926767-387.286564 61.522642-387.286564 161.305635h-132.227769c0-99.782992-163.754297-147.378867-387.730384-161.305635v-2.754745a66.175101 66.175101 0 0 1-66.113884-66.113884V66.419967A66.205709 66.205709 0 0 1 66.221013 0.153041a64.277388 64.277388 0 0 1 26.017038 5.509491L520.034673 139.267673 947.40278 5.662532a64.384517 64.384517 0 0 1 26.017038-5.509491 66.205709 66.205709 0 0 1 66.113884 66.266926v727.252728a66.175101 66.175101 0 0 1-66.067972 66.113884zM92.16153 778.062472c132.365506 16.681512 300.25192 37.036019 382.83306 93.661336V216.553579L92.16153 105.445524v672.616948zM947.525213 103.455986l-380.476222 113.097593v655.170229c82.642355-56.625318 248.110716-76.979824 380.476222-93.661336V103.455986zM179.502257 508.556569a1337.444089 1337.444089 0 0 1 207.371095 65.042594v91.059632a1013.271798 1013.271798 0 0 0-207.371095-65.042594v-91.059632z m-0.795816-206.605889a1337.581826 1337.581826 0 0 1 207.355792 65.042595v91.059632a1012.935107 1012.935107 0 0 0-207.355792-65.042595v-91.059632z m690.385055 0a1337.444089 1337.444089 0 0 0-207.371095 65.042595v91.059632a1012.87389 1012.87389 0 0 1 207.371095-65.042595v-91.059632z"
                  fill="#56AAE7"
                  p-id="4471"
                ></path>
              </svg>
            </div>
            <div
              class="card-item-title"
              style="
                min-height: 70px;
                margin-bottom: -25px;
                font-weight: 500;
                text-align: center;
                font-size: 20px;
              "
            >
              Online research
            </div>
            <div
              class="card-item-text"
              style="
                min-height: 130px;
                text-align: left;
                padding-left: 15px;
                font-weight: 0;
                font-size: 14px;
              "
            >
              Researchers only need to visit the platform's website or your
              computer and follow the prompts to participate in market research.
              Accessing MHinsight's website only requires an available internet
              connection, without the need to download any applications .
            </div>
          </div>
        </div>
        <div
          class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-12 is-guttered card-about-text"
          style="padding-right: 16px; padding-left: 16px"
        >
          <div
            class="card-item"
            style="
              min-width: 50%;
              max-height: 430px;
              font-weight: 500;
              border-radius: 15px;
              border: 1px solid rgba(0, 0, 0, 0.175);
              font-size: 20px;
              opacity: 1;
              -webkit-box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #ffffff;
              box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #fff;
              background-color: #fff;
              margin-bottom: 10px;
            "
          >
            <div
              class="card-item-image"
              style="width: 100%; display: flex; justify-content: center"
            >
              <svg
                t="1732786385085"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6603"
                width="200"
                height="200"
              >
                <path
                  d="M758.2 920.4h-587c-36 0-65.2-29.3-65.2-65.2V170.4c0-36 29.2-65.2 65.2-65.2h586.9c36 0 65.2 29.3 65.2 65.2v146.7c0 18-14.6 32.6-32.6 32.6s-32.6-14.6-32.6-32.6V170.4H171.2v684.8h586.9c18 0 32.6 14.6 32.6 32.6 0.1 18-14.5 32.6-32.5 32.6z"
                  fill="#333333"
                  p-id="6604"
                ></path>
                <path
                  d="M464.7 341.6H269.1c-13.5 0-24.5-10.9-24.5-24.5 0-13.5 11-24.5 24.5-24.5h195.6c13.5 0 24.5 10.9 24.5 24.5 0 13.5-11 24.5-24.5 24.5zM366.9 504.6h-97.8c-13.5 0-24.5-10.9-24.5-24.5s11-24.5 24.5-24.5h97.8c13.5 0 24.5 10.9 24.5 24.5s-11 24.5-24.5 24.5z"
                  fill="#FFAF00"
                  p-id="6605"
                ></path>
                <path
                  d="M350.6 667.7h-81.5c-13.5 0-24.5-10.9-24.5-24.5 0-13.5 11-24.5 24.5-24.5h81.5c13.5 0 24.5 10.9 24.5 24.5-0.1 13.5-11 24.5-24.5 24.5zM660.4 827.1c-61.4 0-119.2-23.9-162.6-67.4-89.7-89.7-89.7-235.5 0-325.2 43.4-43.4 101.2-67.4 162.6-67.4S779.6 391 823 434.5c89.7 89.6 89.7 235.5 0 325.2-43.4 43.5-101.2 67.4-162.6 67.4z m0-394.7c-44 0-85.4 17.1-116.5 48.2-64.2 64.2-64.2 168.7 0 233 31.1 31.1 72.5 48.2 116.5 48.2s85.4-17.1 116.5-48.2c64.2-64.2 64.2-168.7 0-233-31.1-31.1-72.5-48.2-116.5-48.2z"
                  fill="#333333"
                  p-id="6606"
                ></path>
                <path
                  d="M885.8 855.2c-8.3 0-16.7-3.2-23.1-9.6l-85.9-85.9c-12.7-12.7-12.7-33.4 0-46.1 12.7-12.7 33.4-12.7 46.1 0l85.9 85.9c12.7 12.7 12.7 33.4 0 46.1-6.3 6.4-14.7 9.6-23 9.6z"
                  fill="#333333"
                  p-id="6607"
                ></path>
                <path
                  d="M758.2 618.8c-13.5 0-24.5-10.9-24.5-24.5 0-40.5-32.9-73.4-73.4-73.4-13.5 0-24.5-10.9-24.5-24.5 0-13.5 11-24.5 24.5-24.5 67.4 0 122.3 54.8 122.3 122.3 0 13.6-10.9 24.6-24.4 24.6z"
                  fill="#FFAF00"
                  p-id="6608"
                ></path>
              </svg>
            </div>
            <div
              class="card-item-title"
              style="
                min-height: 70px;
                margin-bottom: -25px;
                font-weight: 500;
                text-align: center;
                font-size: 20px;
              "
            >
              Other services
            </div>
            <div
              class="card-item-text"
              style="
                min-height: 130px;
                text-align: left;
                padding-left: 15px;
                font-weight: 0;
                font-size: 14px;
              "
            >
              Questionnaire System Programming Service: Provides online
              questionnaire system and programming services: Provides
              professional online questionnaire system and programming services
              with rich question types, clear logic, user-friendly interface,
              easy operation, and adaptability to various terminal devices.
            </div>
          </div>
        </div>
        <div
          class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-12 is-guttered card-about-text"
          style="padding-right: 16px; padding-left: 16px"
        >
          <div
            class="card-item"
            style="
              min-width: 50%;
              max-height: 430px;
              font-weight: 500;
              border-radius: 15px;
              border: 1px solid rgba(0, 0, 0, 0.175);
              font-size: 20px;
              opacity: 1;
              -webkit-box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #ffffff;
              box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #fff;
              background-color: #fff;
              margin-bottom: 10px;
            "
          >
            <div
              class="card-item-image"
              style="width: 100%; display: flex; justify-content: center"
            >
              <img
                src="http://www.surveypeak.net/assets/mark-Dw1TN8ts.png"
                alt=""
                width="200"
              />
            </div>
            <div
              class="card-item-title"
              style="
                min-height: 70px;
                margin-bottom: -25px;
                font-weight: 500;
                text-align: center;
                font-size: 20px;
              "
            >
              Targeted research
            </div>
            <div
              class="card-item-text"
              style="
                min-height: 130px;
                text-align: left;
                padding-left: 15px;
                font-weight: 0;
                font-size: 14px;
              "
            >
              Obtaining data, behavioral insights, etc. through open and
              conversational communication.
            </div>
          </div>
        </div>
        <div
          class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-12 is-guttered card-about-text"
          style="padding-right: 16px; padding-left: 16px"
        >
          <div
            class="card-item"
            style="
              min-width: 50%;
              max-height: 430px;
              font-weight: 500;
              border-radius: 15px;
              border: 1px solid rgba(0, 0, 0, 0.175);
              font-size: 20px;
              opacity: 1;
              -webkit-box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #ffffff;
              box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #fff;
              background-color: #fff;
              margin-bottom: 10px;
            "
          >
            <div
              class="card-item-image"
              style="width: 100%; display: flex; justify-content: center"
            >
              <img
                src="http://www.surveypeak.net/assets/onlinepanel-Cb0xWvXA.png"
                alt=""
                width="200"
                height="230"
              />
            </div>
            <div
              class="card-item-title"
              style="
                min-height: 70px;
                margin-bottom: -25px;
                font-weight: 500;
                text-align: center;
                font-size: 20px;
              "
            >
              Questionnaire System Programming Service
            </div>
            <div
              class="card-item-text"
              style="
                min-height: 130px;
                text-align: left;
                padding-left: 15px;
                font-weight: 0;
                font-size: 14px;
              "
            >
              Provides online questionnaire system and programming services:
              Provides professional online questionnaire system and programming
              services with rich question types, clear logic, user-friendly
              interface, easy operation, and adaptability to various terminal
              devices.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="panel-book"
      style="margin: 0 auto; width: 80%; margin-top: 40px"
    >
      <div
        class="el-row is-align-center"
        style="margin-left: -16px; margin-right: -16px"
      >
        <div
          class="el-col el-col-24 el-col-sm-24 is-guttered panel-book-content"
          style="
            padding-right: 16px;
            padding-left: 16px;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
            padding: 60px 20px 20px;
            display: flex !important
;
            align-items: center;
            justify-content: center;
          "
        >
          <div
            class="panel-book-box"
            style="
              display: flex !important
;
              align-items: center;
              justify-content: center;
              max-width: 500px;
              flex-wrap: wrap;
              margin-bottom: 30px;
            "
          >
            <div
              class="panel-book-title"
              style="
                color: #fffc;
                line-height: 1.5em;
                margin-bottom: 0;
                font-size: 26px;
              "
            >
              Click here to know more about our panels.
            </div>
            <div
              class="panel-book-button"
              style="
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 300px;
                height: 46px;
                margin-top: 20px;
                color: #475461;
                margin-bottom: 0;
                border-radius: 10px;
                font-size: 26px;
                background: #3bafdb;
                color: #fff;
                font-size: 18px;
                padding: 11px;
              "
            >
              <span>Download the panel book</span>
              <div
                class="arrow-book-icon"
                style="
                  margin-left: 10px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
                  box-shadow: 0 0 10px #1d718f;
                "
              >
                <img
                  class="arrow-book"
                  src=""
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%; text-align: center">
      <img src="../../assets/222.jpg" alt="" />
    </div>
    <div class="home-choose" style="padding: 20px 40px 60px">
      <div
        class="home-desc-title"
        style="
          argin: 80px 40px 50px;
          text-align: center;
          font-size: 40px;
          font-weight: 600;
          line-height: 1.1em;
          color: #333;
        "
      >
        WHY CHOOSE US
      </div>
      <div
        class="el-row is-justify-center is-align-center"
        style="
          margin-left: -9px;
          margin-right: -9px;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          position: relative;
        "
      ></div>
    </div>
    <div
      class="home-contact"
      style="
        margin: 0 auto;
        width: 80%;
        padding: 60px 20px;
        background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
      "
    >
      <div class="home-contact-header">
        <div
          class="home-contact-title"
          style="
            text-align: center;
            padding: 0 20px 40px;
            font-size: 30px;
            font-weight: 600;
            color: #ffffffd6;
          "
        >
          CONTACT US
        </div>
      </div>
      <div
        class="el-row is-justify-center is-align-center"
        style="
          margin-left: -9px;
          margin-right: -9px;
          justify-content: center;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          position: relative;
        "
      >
        <div
          class="contact-item-box"
          style="
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            max-width: 700px;
          "
        >
          <div
            class="contact-item"
            style="
              background-color: rgb(47, 40, 113);
              width: 300px;
              height: 48px;
              margin: 20px;
              padding-left: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 10px;
              overflow: hidden;
              cursor: pointer;
            "
          >
            <div
              class="contact-name"
              style="
                color: #fff;
                font-weight: 700;
                font-size: 16px;
                width: 100%;
              "
            >
              mail
            </div>
            <div
              class="contact-icon"
              style="
                flex-shrink: 0;
                width: 48px;
                height: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff;
              "
            >
              <img
                src="data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1726760390881'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='4290'%20width='32'%20height='32'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cpath%20d='M838.954667%20234.666667H170.666667c-3.626667%200-7.168%200.448-10.56%201.322666l323.690666%20323.669334a21.333333%2021.333333%200%200%200%2030.165334%200L838.954667%20234.666667z%20m46.144%2014.186666l-260.693334%20260.693334%20262.933334%20262.912c5.44-7.168%208.661333-16.106667%208.661333-25.792V277.333333c0-10.944-4.117333-20.906667-10.88-28.48zM843.861333%20789.333333l-249.6-249.621333-50.133333%2050.133333a64%2064%200%200%201-90.517333%200l-50.112-50.133333L156.373333%20786.88c4.48%201.578667%209.28%202.453333%2014.314667%202.453333h673.194667zM128.661333%20754.218667L373.333333%20509.525333%20129.578667%20265.813333A42.709333%2042.709333%200%200%200%20128%20277.333333v469.333334c0%202.56%200.213333%205.098667%200.661333%207.552zM170.666667%20192h682.666666a85.333333%2085.333333%200%200%201%2085.333334%2085.333333v469.333334a85.333333%2085.333333%200%200%201-85.333334%2085.333333H170.666667a85.333333%2085.333333%200%200%201-85.333334-85.333333V277.333333a85.333333%2085.333333%200%200%201%2085.333334-85.333333z'%20fill='%23333333'%20p-id='4291'%3e%3c/path%3e%3c/svg%3e"
                alt=""
              />
            </div>
          </div>
          <div
            class="contact-item"
            style="
              background-color: rgb(110, 71, 153);
              width: 300px;
              height: 48px;
              margin: 20px;
              padding-left: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 10px;
              overflow: hidden;
              cursor: pointer;
            "
          >
            <div
              class="contact-name"
              style="
                color: #fff;
                font-weight: 700;
                font-size: 16px;
                width: 100%;
              "
            >
              call
            </div>
            <div
              class="contact-icon"
              style="
                flex-shrink: 0;
                width: 48px;
                height: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff;
              "
            >
              <img
                src="data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1726760463025'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='5524'%20width='32'%20height='32'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cpath%20d='M751.1%20966.3c-16.6%200-32.2-2.6-46.2-7.7-18-4.8-171.8-50.8-380.2-259.3C122.6%20497.3%2071.9%20338.3%2066.4%20319.6c-9.4-23.7-11.3-52.6-5.2-81.3%206.1-28.8%2019.7-54.9%2038.2-73.4L178%2086.3c18.4-18.4%2042.2-28.6%2067-28.6%2028.7%200%2055.7%2013.7%2074.2%2037.5l115.1%20148.4c19.4%2025%2021.7%2065.8%205.4%2093l-56.2%2093.1c5.3%2017.6%2023.6%2061.2%2085.2%20126.5%2068.5%2064.9%20111.1%2081%20125.1%2084.7l93.6-56.5c11.4-6.9%2026.2-10.7%2041.6-10.7%2019.4%200%2038.1%205.8%2051.3%2016l148.4%20115.2c22.4%2017.4%2035.6%2041.7%2037.3%2068.5%201.7%2026.8-8.4%2052.6-28.4%2072.6l-78.5%2078.5C833.4%20950.3%20792%20966.3%20751.1%20966.3L751.1%20966.3zM244.9%20107.3c-11.5%200-22.8%205-31.9%2014l-78.5%2078.5c-24.1%2024.1-34.3%2071.8-21.7%20102.1l0.1%200.1%200.9%202.6%200%200.2c0.4%201.6%2046%20159.4%20245.9%20359.3%20206.4%20206.4%20357.1%20246.2%20358.6%20246.6l0.3%200.1%202.4%200.7%200.1%200.1c8.6%203.3%2019%205%2030%205%2027.8%200%2056.5-10.7%2073-27.2l78.5-78.5c9.8-9.8%2014.8-22%2014-34.4-0.8-12.4-7.3-23.9-18.2-32.4L750%20628.9c-4.6-3.6-12.6-5.8-20.8-5.8-6.4%200-12.2%201.3-16.1%203.7l-107.6%2064.9-7-0.1c-6.1-0.1-62.3-3.4-164.7-100.4l-0.2-0.2C340.8%20493%20333%20434%20332.4%20427.6l-0.7-8.1L397.2%20311c6-9.9%204.9-27.8-2.1-36.9L279.9%20125.6C270.8%20113.8%20258.3%20107.3%20244.9%20107.3z'%20fill='%23272636'%20p-id='5525'%3e%3c/path%3e%3c/svg%3e"
                alt=""
              />
            </div>
          </div>
          <div
            class="contact-item"
            style="
              background-color: rgb(117, 177, 216);
              width: 300px;
              height: 48px;
              margin: 20px;
              padding-left: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 10px;
              overflow: hidden;
              cursor: pointer;
            "
          >
            <div
              class="contact-name"
              style="
                color: #fff;
                font-weight: 700;
                font-size: 16px;
                width: 100%;
              "
            >
              address
            </div>
            <div
              class="contact-icon"
              style="
                flex-shrink: 0;
                width: 48px;
                height: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff;
              "
            >
              <img
                src="data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1726760570550'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='6592'%20width='32'%20height='32'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cpath%20d='M508.313%201018.666c0%200-379.51-422.921-379.51-632.516%200-209.606%20169.914-379.51%20379.51-379.51s379.511%20169.903%20379.51%20379.51c0%20209.596-379.51%20632.516-379.51%20632.516zM508.313%2055.295c-182.719%200-330.854%20150.305-330.854%20335.72s330.854%20559.534%20330.854%20559.534%20330.854-374.117%20330.854-559.534c0-185.415-148.135-335.72-330.854-335.72zM508.312%20512.654c-87.336%200-158.129-70.793-158.129-158.129s70.793-158.129%20158.129-158.129%20158.129%2070.793%20158.129%20158.129c0%2087.328-70.793%20158.129-158.129%20158.129zM508.313%20240.185c-64.488%200-116.772%2052.285-116.772%20116.772s52.285%20116.772%20116.772%20116.772c64.498%200%20116.772-52.285%20116.772-116.772%200-64.488-52.275-116.772-116.772-116.772z'%20fill=''%20p-id='6593'%3e%3c/path%3e%3c/svg%3e"
                alt=""
              />
            </div>
          </div>
          <div
            class="contact-item"
            style="
              background-color: rgb(87, 92, 168);
              width: 300px;
              height: 48px;
              margin: 20px;
              padding-left: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 10px;
              overflow: hidden;
              cursor: pointer;
            "
          >
            <div
              class="contact-name"
              style="
                color: #fff;
                font-weight: 700;
                font-size: 16px;
                width: 100%;
              "
            >
              media
            </div>
            <div
              class="contact-icon"
              style="
                flex-shrink: 0;
                width: 48px;
                height: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff;
              "
            >
              <img
                src="data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1726760608121'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='7733'%20id='mx_n_1726760608122'%20width='32'%20height='32'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cpath%20d='M946.2784%200C966.656%200%20984.6784%206.9632%201000.448%2020.7872%201016.1152%2034.7136%201024%2051.8144%201024%2072.192l0%20876.9536c0%2020.3776-7.8848%2037.4784-23.552%2051.3024C984.6784%201014.272%20966.656%201021.2352%20946.2784%201021.2352L74.9568%201021.2352c-20.3776%200-37.888-6.9632-52.736-20.7872C7.3728%20986.5216%200%20969.5232%200%20949.0432L0%2072.192c0-20.3776%207.3728-37.4784%2022.2208-51.3024S54.5792%200%2074.9568%200L946.2784%200zM227.5328%20316.3136c24.064%200%2044.8512-8.704%2062.464-26.4192%2017.6128-17.6128%2026.4192-38.4%2026.4192-62.464%200-23.9616-8.8064-44.8512-26.4192-62.464C272.384%20147.5584%20251.5968%20138.752%20227.5328%20138.752c-24.064%200-44.8512%208.8064-62.464%2026.3168-17.6128%2017.6128-26.4192%2038.4-26.4192%2062.464%200%2025.9072%208.2944%2047.2064%2024.9856%2063.7952C180.4288%20308.0192%20201.6256%20316.3136%20227.5328%20316.3136zM302.4896%20871.3216%20302.4896%20382.976%20152.6784%20382.976l0%20488.448L302.4896%20871.424zM871.3216%20871.3216%20871.3216%20602.2144c0-73.9328-12.4928-130.8672-37.4784-170.7008C808.96%20391.7824%20761.2416%20371.8144%20690.9952%20371.8144c-70.3488%200-118.3744%2025.9072-144.2816%2077.7216L543.9488%20449.536%20543.9488%20382.976%20399.5648%20382.976l0%20488.448%20149.8112%200L549.376%20629.9648c0-83.2512%2030.5152-124.928%2091.5456-124.928%2024.064%200%2042.0864%207.8848%2054.0672%2023.552%2011.9808%2015.7696%2018.944%2030.5152%2020.7872%2044.4416s2.7648%2033.792%202.7648%2059.6992l0%20238.6944L871.3216%20871.424z'%20p-id='7734'%20fill='%23000000'%3e%3c/path%3e%3c/svg%3e"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer
      class="el-footer"
      style="
        --el-footer-padding: 0 20px;
        --el-footer-height: 60px;
        box-sizing: border-box;
        flex-shrink: 0;
      "
    >
      <div
        class="home-footer"
        style="
          background-color: #fff;
          margin: 0 auto;
          width: 80%;
          padding: 20px 50px;
        "
      >
        <div
          class="el-row is-justify-space-between"
          style="
            margin-left: -10px;
            margin-right: -10px;
            justify-content: space-between;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            position: relative;
          "
        >
          <div
            class="el-col el-col-5 is-guttered"
            style="padding-right: 10px; padding-left: 10px"
          >
            <div class="home-footer-left">
              <!-- <div class="home-footer-left-text">SURVEY PEAK MHinsihgt.</div> -->
              <div class="home-footer-left-text">business@muheinsight.com</div>
              <div class="home-footer-left-text">
                Address: 260B ANG MO KIO STREET 21<br />
                #18-13<br />
                KEBUN BARU COURT<br />
                SINGAPORE(562260)
              </div>
            </div>
          </div>
          <div
            class="el-col el-col-6 is-guttered"
            style="padding-right: 10px; padding-left: 10px"
          >
            <div class="footer-left-content">
              <div class="home-footer-right">
                <div class="link-icon">
                  <svg
                    t="1727527246813"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2285"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M88.192 329.002667h182.869333v608.256H88.192V328.96zM180.053333 85.333333A94.805333 94.805333 0 0 0 85.333333 180.138667a94.805333 94.805333 0 0 0 94.762667 89.6 94.805333 94.805333 0 0 0 94.762667-89.6A94.805333 94.805333 0 0 0 180.138667 85.333333z m698.922667 324.266667a181.461333 181.461333 0 0 0-150.656-62.122667 201.386667 201.386667 0 0 0-180.053333 102.4h-2.858667V329.002667H391.893333c2.858667 62.122667 0 608.256 0 608.256h182.912V559.36a87.68 87.68 0 0 1 91.477334-70.144c59.221333 0 88.576 43.093333 88.576 126.549333V938.666667h183.381333v-346.069334A267.008 267.008 0 0 0 879.018667 409.6z"
                      fill="#121437"
                      p-id="2286"
                    ></path>
                  </svg>
                </div>
                <a
                  href="https://join.skype.com/invite/xGYiZ4HRTg6c"
                  class="link-icon skype-icon"
                  ><svg
                    t="1727527621013"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3330"
                    width="32"
                    height="32"
                  ></svg
                ></a>
              </div>
              <div
                style="
                  text-align: center;
                  position: absolute;
                  bottom: 0;
                  left: 50%;
                  transform: translateX(-50%);
                "
              >
                <p @click="handleLogin" style="cursor: pointer">
                  Privacy Policy
                </p>
                <p @click="handleLogin1" style="cursor: pointer">
                  Terms and Conditions
                </p>
                <p>Copyright 2023 © MHinsight All Rights Reserved</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import privacyPolicy from "./privacyPolicy.vue";
import condition from "./condition.vue";
let ishow = ref(false);
let yinsi = ref(false);

const bannerList = ref([
  { url: "../../" },
  { url: "../../assets/1.jpg" },
  { url: "http://www.surveypeak.net/assets/bg1-BZypdaZQ.png" },
]);
const handleLogin = () => {
  console.log("handleLogin");
  ishow.value = !ishow.value;
  if (yinsi.value) {
    yinsi.value = false;
  }
  // yinsi.value = !yinsi.value
};
const handleLogin1 = () => {
  console.log("handleLogin");
  yinsi.value = !yinsi.value;
  if (ishow.value) {
    ishow.value = false;
  }
  // ishow.value = !ishow.value
};
</script>

<style lang="scss">
.floor-swiper {
  overflow: hidden;
  width: 80%;
  height: 580px;
  margin: 20px auto 0;

  :deep(.slick-slide) {
    overflow: hidden;
    height: 580px;
  }

  .swiper-list-item {
    overflow: hidden;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      // object-fit: cover;
      vertical-align: middle;
    }
  }
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

@media only screen and (max-width: 768px) {
  .home-card .card-item .card-item-image {
    width: 80%;
    display: flex;
    justify-content: center;
  }
}

@media only screen and (max-width: 768px) {
  .home-card {
    padding: 20px 10px;
  }
}

@media only screen and (max-width: 767px) {
  .el-col-xs-24.is-guttered {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .el-col-xs-24 {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.card-item {
  min-width: 50%;
  max-height: 430px;
  font-weight: 500;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.175);
  font-size: 20px;
  opacity: 1;
  -webkit-box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #ffffff;
  box-shadow: 6px 6px 13px #c7c7c7, -6px -6px 13px #fff;
  background-color: #fff;
  margin-bottom: 10px;
}

@media only screen and (max-width: 768px) {
}

.el-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

[class*="el-col-"].is-guttered {
  display: block;
  min-height: 1px;
}

@media only screen and (max-width: 767px) {
  .el-col-xs-24.is-guttered {
    display: block;
  }
}

.home-card-desc-box {
  display: flex;
  justify-content: center;
}

.home-desc-title {
  margin: 80px 40px 50px;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1em;
  color: #333;
  font-family: "Open Sans", Sans-serif;
}

@media only screen and (max-width: 768px) {
  .home-desc-title {
    margin: 20px 0 10px;
    font-size: 30px;
  }
}

.home-about .about-text .about-text-top {
  width: 100%;
  padding: 15px;
  font-size: 20px;
}

.home-about .about-text div {
  padding: 10px;
}

.home-about,
.home-card,
.home-choose {
  padding-left: 340px;
  padding-right: 340px;
}

.home-about {
  width: 76%;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 30px;
  margin: 0 auto;
  font-size: 20px;
}

@media only screen and (min-width: 768px) {
  .el-col-sm-24.is-guttered {
    display: block;
  }
}

.home-desc-title {
  margin: 80px 40px 50px;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1em;
  color: #333;
  font-family: "Open Sans", Sans-serif;
}

.floor-2 {
  display: flex;
  width: 65%;
  height: 112px;
  margin: 20px auto;
  background-color: #7ab851;

  .floor-right {
    overflow: hidden;
    flex: 1;
    color: #fff;

    h3 {
      margin: 10px 0 10px 0;
      text-align: center;
      font-weight: 700;
      text-transform: uppercase;
    }

    p {
      margin: 0;
      line-height: 1.2;
      text-align: center;
    }
  }
}

.floor-3 {
  width: 65%;
  margin: 0 auto;

  .title {
    display: block;
    text-align: center;
    margin: 30px 0;
    color: #1a475e;
    font-weight: 700;
    font-size: 40px;
  }

  .floor-card {
    display: flex;
    background-color: #f0f1f4;
    padding: 10px 0;
    justify-content: space-between;

    .card-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      img {
        max-width: 156px;
        height: auto;
      }

      .card-item-title {
        font-size: 24px;
        font-weight: bold;
        margin: 10px;
      }

      p {
        line-height: 1.3;
        text-align: center;
      }
    }
  }
}
</style>
